<nz-row [nzGutter]="16">
  <nz-col [nzMd]="24">
    <nz-row style="height: 60px;" [nzType]="'flex'" [nzJustify]="'space-around'" [nzAlign]="'middle'">
      <nz-col [nzSpan]="24">
        <form nz-form [formGroup]="validateForm" [nzLayout]="'inline'">

          <nz-form-item>
            <nz-form-label>菜单名称</nz-form-label>
            <nz-form-control>
              <input nz-input nzSize="default" [placeholder]="'请输入'" formControlName="name">
            </nz-form-control>
          </nz-form-item>

          <nz-form-item>
            <nz-form-control>
              <button nz-button [nzType]="'primary'" (click)="search()">
                <i class="anticon anticon-search"></i>
                {{'list.text.search' | translate}}
              </button>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item>
            <nz-form-control>
              <button nz-button [nzType]="'primary'" (click)="showModify()">{{'modify.text.add' | translate}}</button>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item>
            <nz-form-control>
              <button nz-button [nzType]="'primary'" (click)="refresh()">
                <i class="anticon anticon-sync"></i>
              </button>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item>
            <nz-form-control>
              <button nz-button [nzType]="'primary'" (click)="refreshAuthority()">
                {{'刷新权限' | translate}}
              </button>
            </nz-form-control>
          </nz-form-item>
        </form>
      </nz-col>
    </nz-row>
    <nz-row>
      <nz-table #nzTable
        nzSize="middle"
        [nzData]="data"
        nzFrontPagination="false"
        nzShowSizeChanger="true"
        nzShowQuickJumper="true"
        [nzLoading]="_loading"
        [(nzPageIndex)]="page.pageNo"
        [(nzPageSize)]="page.pageSize"
        [nzTotal]="page.total"
        (nzPageIndexChange)="getMenuByPage()"
        (nzPageSizeChange)="getMenuByPage(true)"
        [nzShowTotal]="pagination"
      >
        <thead>
          <tr>
            <th [nzWidth]="'22%'">
              <span>菜单名称</span>
            </th>
            <th>
              <span>菜单描述</span>
            </th>
            <th>
              <span>菜单地址</span>
            </th>
            <th [nzWidth]="'8%'">
              <span>菜单图标</span>
            </th>
            <th [nzWidth]="'8%'">
              <span>排序</span>
            </th>
            <th [nzWidth]="'15%'">
              <span>操作</span>
            </th>
          </tr>
        </thead>
        <tbody>
          <ng-template ngFor let-data [ngForOf]="nzTable.data">
            <ng-template ngFor let-item [ngForOf]="expandDataCache[data.id]">
              <tr *ngIf="(item.parent && item.parent.expand)||!(item.parent)">
                <td [nzIndentSize]="item.level" [nzShowExpand]="!!item.menuFunctionChilders" [(nzExpand)]="item.expand" (nzExpandChange)="collapse(expandDataCache[data.id],item,$event)">
                  <i *ngIf="!item.menuFunctionChilders" style="display: inline-block;width: 16px;"></i>&nbsp;&nbsp;{{item.name}}
                </td>
                <td>{{item.mDesc}}</td>
                <td>{{item.url}}</td>
                <td>
                  <i class="anticon anticon-{{item.icon}}" style="font-size: 16px;"></i>
                </td>
                <td>{{item.sort}}</td>
                <td>
                  <a (click)="showModify(item)">{{'modify.text.edit' | translate}}</a>
                  <nz-divider nzType="vertical"></nz-divider>
                  <nz-popconfirm [nzTitle]="'modify.text.delete_tip' | translate" (nzOnConfirm)="delete(item.id)" [nzPlacement]="'top'">
                    <a nz-popconfirm>{{'modify.text.delete' | translate}}</a>
                  </nz-popconfirm>
                </td>
              </tr>
            </ng-template>
          </ng-template>
        </tbody>
      </nz-table>
      <ng-template #pagination>
        {{'list.text.pagination' | translate}} {{page.total}} {{'list.text.article' | translate}}
      </ng-template>
    </nz-row>
  </nz-col>
</nz-row>
